import React from 'react';
import { Card, Typography } from 'antd';

const recommends = [
  {
    id: 1,
    title: 'AI芯片新突破',
    summary: '最新AI芯片性能提升50%，推动大模型训练...',
  },
  {
    id: 2,
    title: '大模型安全性分析',
    summary: '专家解读大模型在实际应用中的安全挑战...',
  },
  {
    id: 3,
    title: '开源模型趋势',
    summary: '开源大模型生态日益繁荣，开发者受益更多...',
  }
];

const RelatedRecommend: React.FC = () => {
  return (
    <Card title={<span style={{ color: '#fff' }}>相关推荐</span>} style={{ background: '#232733', color: '#fff', minHeight: 300 }} bordered={false}>
      <div style={{ display: 'flex', overflowX: 'auto', gap: 16 }}>
        {recommends.map(item => (
          <Card key={item.id} style={{ minWidth: 220, marginRight: 8, background: '#181C23', color: '#fff' }} bordered={false} hoverable>
            <Typography.Title level={5} style={{ color: '#fff' }}>{item.title}</Typography.Title>
            <Typography.Paragraph style={{ color: '#bbb' }}>{item.summary}</Typography.Paragraph>
          </Card>
        ))}
      </div>
    </Card>
  );
};

export default RelatedRecommend; 